<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .a{
                width: 200px;
                height: 200px;
                background-color: red;
                /*
                浮动
                left：左浮动
                right：右浮动
                浮动元素特点：
                1.元素脱离文档流（元素在网页中所占的位置）
                2.浮动元素支持所有的css样式设置（margin：auto失效）
                3.元素同排显示，没有换行被解析问题
                */
                float: left;
            }
            .b{
                width: 300px;
                height: 300px;
                background-color: blue;
                /*清除周围右浮动元素对该元素造成的影响*/
                /*clear: right;*/
                /*清除周围左浮动元素对该元素造成的影响*/
                /*clear: left;*/
                /*清除周围浮动元素对该元素造成的影响*/
                clear: both;
                float: right;
            }
            .c{
                width: 400px;
                border: 5px solid black;
            }
            .c>img{
                width: 100px;
                /*浮动元素不会遮盖文字*/
                float: left;

            }
        </style>
    </head>
    <body>
    <!--浮动：元素沿着某一个方向进行移动，直到碰到父级边界或者其他同级浮动元素-->
        <div class="a"></div>
        <div class="b"></div>
        <div class="c">
            <img src="meizhitu.png" alt="">
            <p>
                好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿好饿好饿好饿我真的好饿
            </p>
        </div>
    </body>
</html>